<template>
  <el-container>
    <el-header>
      <el-menu
          :default-active="activeIndex"
          class="HomeChoose"
          mode="horizontal"
          :ellipsis="false"
          @select="handleSelect"
          router
      >
        <el-menu-item index="0">
          <img
              style="width: 60px"
              src="../logo.png"
              alt="SC logo"
          />
        </el-menu-item>
        <div class="flex-grow"/>
        <el-menu-item index="home">
          <el-icon>
            <House/>
          </el-icon>
          首页
        </el-menu-item>
        <el-sub-menu :index="item.path" v-for="item in menu_data" :key="item.name">
          <template #title>
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.name }}</span></template>
          <el-menu-item :index="child.path" v-for="child in item.child" :key="child.name">
            <el-icon>
              <component :is="child.icon"></component>
            </el-icon>
            {{ child.name }}
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item index="announcement">
          <el-icon>
            <Help/>
          </el-icon>
          公告
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <Phone/>
          </el-icon>
          联系我们
        </el-menu-item>

        <div class="IDpicture">
          <el-input v-model="input2" class="searchFunction" placeholder="请输入搜索的功能">
            <template #suffix>
              <el-icon class="el-input__icon">
                <search/>
              </el-icon>
            </template>
          </el-input>
          <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
        </div>
      </el-menu>

    </el-header>

    <el-main>
      <el-input
          class="search"
          style="width:240px"
          v-model="input1"
          size="large"
          placeholder="请输入车位编号"
          :suffix-icon="Search"
      />
      <el-button style="margin-right: 20px" class="button1" type="button">添加车位</el-button>
      <el-button style="margin-right: 20px" class="button2" type="button">删除车位</el-button>
      <el-divider
          style="margin-top: 70px; border-bottom-style:groove; "
          content-position="left">
        <h2>我的车位</h2>
      </el-divider>
      <div style="display: flex">
        <div style="width: 800px">
          <el-row style="margin-top: 0;margin-left: 10px">
            <el-col v-for="(item, index) in goods"
                    :key="item.id"
                    :span="10"
                    :offset="1"
                    style="margin-top: 5%">
              <el-card class="carbox" :body-style="{height: '300px',padding:'0'}"
                       style=" width: 300px;margin-left: 0px">
                <img :src="addSlash(item.goodsUrl)"
                     style="height: 80%;width: 100%"/>
                <div style="padding: 10px">
                  <div style="font-family: Arial, sans-serif; font-size: 19px; font-weight: lighter; padding: 10px">
                    {{ item.goodsName }}
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <el-divider class="fenge" direction="vertical" style="height: 800px;"/>
      </div>
    </el-main>
    <el-footer></el-footer>
  </el-container>

</template>

<script setup>
import *as allGoodsAPI from "../api/goods";
import {onMounted, ref} from 'vue'
import {ElButton, ElIcon, ElInput} from 'element-plus';
import {Search} from '@element-plus/icons';
import {useRouter} from "vue-router";
import {useStore} from "vuex";

const activeIndex = ref('1')
const goods = ref([])
const totalCount = ref(10);
const handleSelect = (index) => {
  activeIndex.value = index;
}
const menu_data = ref([

  {
    name: '物业服务',
    icon: 'OfficeBuilding',
    path: '/community',
    child: [
      {
        name: '物业费缴纳',
        icon: 'ChatRound',
        path: '/stratafees',
      },
      {
        name: '车位管理',
        icon: 'Pointer',
        path: '/park',
      },
      {
        name: '报事维修',
        icon: 'ChatRound',
        path: '/maintenance',
      },
      {
        name: '事项投诉',
        icon: 'ChatRound',
        path: '/complaints',
      },
      {
        name: '访客登记',
        icon: 'ChatRound',
        path: '/visitor',
      },
    ]
  },
  {
    name: '商城',
    icon: 'Goods',
    path: '/index/Shopping',
    child: [
      {
        name: '商城首页',
        icon: 'Goods',
        path: '/shophome',
      },
      {
        name: '我的收藏',
        icon: 'Goods',
        path: '/collect',
      },
      {
        name: '我的购物车',
        icon: 'Goods',
        path: '/shoppingcart',
      },
      {
        name: '我的订单',
        icon: 'Goods',
        path: '/Order',
      },
      {
        name: '我的钱包',
        icon: 'Goods',
        path: '/wallet',
      }
    ]
  },
])

const router = useRouter();
const store = useStore();
onMounted(() => {
  if (store.getters.getId == 0) {
    alert('请登录')
    router.push('/home')
  } else {
    allGoodsAPI.allGoods().then((res) => {
      goods.value = res.data;
    })
  }

})
const addSlash = (url) => {
  return `/${url}`
}
const handleClick = (row) => {
  console.log(row);
};
</script>
<style scoped>
.button1 {
  width: 80px;
  margin-left: 1100px;
  height: 30px;
  color: white;
  background: dodgerblue;
}

.button2 {
  width: 80px;
  height: 30px;
  margin-right: 30px; /* 根据需要调整间距 */
  color: white;
  background: red;
}

.el-header {
  flex: 0 0 10%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  padding: 0 0px; /* 添加内边距以防止内容贴近边缘 */
}

.el-footer {
  flex: 0 0 10%; /* footer占据10%高度，且不缩放 */
  line-height: 1; /* 同上 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.el-main {
  flex: 1; /* main占据剩余空间 */
  padding: 20px; /* 添加内边距 */
}

.searchFunction {
  height: 28px;
  width: 80%;
  right: 40px;
}

/*头部边框阴影*/
.HomeChoose {
  height: 100%;
  border: none;
  padding: 0;
  box-shadow: 0px 2px 0px 0 rgba(0, 0, 0, 0.1);
  display: flex;
}

.flex-grow {
  flex-grow: 0;
}

.IDpicture {
  text-align: right;
  display: flex;
  justify-content: flex-end; /* 让头像与其他内容分开排列 */
  align-items: center; /* 垂直居中对齐 */
  margin-left: 48%; /* 调整左右内边距 */
}

.carbox {
  position: relative;
}

.fenge {
  border-width: 2px;
  border-color: darkgray;
}
</style>